<template>
  <div id="app" style="min-width: 1024px">
    <el-container>
      <el-header class="el-header">
        <div class="nav-bar">
          <div class="left-nav">
            <el-menu mode="horizontal" background-color="rgb(23, 43, 77)">
              <el-menu-item :index="1">
                <img
                  src="https://www.72crm.com/cloud/static/png/logo-tkST0nhu.png"
                  width="24"
                  alt=""
                />
                <span>悟空CRM</span>
              </el-menu-item>
              <el-menu-item
                class="menu-tabs"
                v-for="(item, index) in firstMenuList"
                :key="index"
                active-text-color="#ffd04b"
                :index="item.menuNo"
              >
                <span class="span-hover" @click="getChildMenu(item.menuNo)">
                  {{ item.menuZhName }}
                </span>
              </el-menu-item>
            </el-menu>
          </div>
          <div class="right-nav"></div>
        </div>
      </el-header>
      <el-container>
        <el-aside
          width="180px"
          class="left-aside"
          v-if="childMenuList.length != 0"
          :key="JSON.stringify(childMenuList)"
        >
          <AsideMenu :child-menu-list="childMenuList" />
        </el-aside>
        <el-main style="padding: 0; background-color: #f4f5f7">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { findPrmissionList } from '@/api/permissionMenu'
import AsideMenu from '@/components/AsideMenu.vue'
import { ref } from 'vue'

const firstMenuList = ref([])
const childMenuList = ref([])

function loadMenu() {
  findPrmissionList()
    .then((result) => {
      console.log(result)
      firstMenuList.value = result.data
    })
    .catch((error) => {
      console.log(error)
    })
}

loadMenu()

function getChildMenu(menuNo) {
  findPrmissionList(menuNo).then((result) => {
    childMenuList.value = result.data
  })
}
</script>
<style scoped lang="scss">
.el-header {
  height: 59px;
  background-color: rgb(23, 43, 77);
}

.menu-tabs {
  padding: 0;
  background-color: rgb(23, 43, 77);
}

.span-hover:hover {
  color: #172b4d;
  background-color: #f5f5f5;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  padding: 0 10px;
}

.isActive {
  color: #172b4d;
  background-color: #f5f5f5;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  padding: 0 10px;
}

.nav-bar {
  height: 56px;
  background-color: rgb(23, 43, 77);
}

.el-menu {
  height: 58px;
  border: none;
}

.el-menu-item {
  background-color: rgb(23, 43, 77);
  width: 74px;
}

span {
  color: white;
}

.left-aside {
  border-right: 1px solid var(--el-border-color);
  height: calc(100vh - 59px);
}
</style>
